<template>
  <div class="user_info_page">
    <div class="user_info_header">
      <div class="img_header">
        <a-avatar style="width: 100px; height: 100px">
          <template #icon>
            <img :src="'https://hzh.woide.top' + userDetail.info.avatar" alt="" />
          </template>
        </a-avatar>
      </div>
      <div class="info_header">
        <div class="title">{{ userDetail.info.username }}</div>
        <div class="phone">{{ userDetail.info.mobile }}</div>
        <div class="remark">{{ userDetail.info.email }}</div>
      </div>

      <div class="user_quit">
       
        <a-button type="primary" @click="share" >分享</a-button>
     
        <a-button type="default" @click="quit">退出</a-button>
       
      </div>

      <div class="frequency">
        <div class="num"><span> {{ userDetail.publish_count }} </span>条发布</div>
        <!-- <div class="num">剩余<span> 0 </span>次数</div>
        <div class="num"><span> 0 </span>次接单</div> -->
      </div>
    </div>
    <div class="user_info_body">
 
      <div class="tab_box">

        <a-segmented v-model:value="value" block size="large" :options="data" @change="changeComp" />
      </div>

      <!-- <Invitation></Invitation> -->
       <keep-alive>
        <component :is="changeComp(value)"></component>
       </keep-alive>
       
      <!-- <div class="tab_body" v-if="userDetail.invite_list.length != 0">
        <div v-for="(item, index) of userDetail.invite_list" :key="index" class="invite_box">
          <div>
            邀请名称： {{ item.invite_name }}
          </div>
          <div>
            邀请时间： {{ item.created_at }}
          </div>
        </div>
      </div>
      <div v-if="userDetail.invite_list.length == 0" class="empty_box"> 
        <a-empty  description="暂无邀请"/>
      </div> -->
    </div>
    <a-modal v-model:open="signOutState" title="确认退出？" @ok="confirmOut" centered okText="确认" cancelText="取消">
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
 
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { getUserInfo, myInvite } from "@/api/user/index"
import Invitation from "./module/Invitation.vue";
import OrderList from "./module/orderList.vue";
interface IInfoType {
  avatar: string;
  username: string;
  mobile: string;
  email: string;
  sharecode: string;
}

const userDetail = reactive({
  info: {} as IInfoType, publish_count: 0, 
})  
const router = useRouter();
const data = reactive(['接取记录','邀请记录']);
const value = ref(data[0]);
const signOutState = ref(false);
function copyToClipboard(text: string) {
    navigator.clipboard.writeText(text).then(() => {
         message.success({
            content: "已复制到剪贴板",
        })
    }).catch(err => {
         message.error({
            content: "分享失败",
        }) 
    });
}

onMounted(() => {
  getUserDetail();
  // getMyInvite()
})

const getUserDetail = async () => {
  const res = await getUserInfo();
  if (res.data.code != 0) return message.error({
    content: res.data.msg,
  });
  userDetail.info = res.data.data.info
  userDetail.publish_count = res.data.data.publish_count
  

}

const changeComp = (value: string) => {
  if (value == '邀请记录') {
    return Invitation
  } else {
    return OrderList
  }
}

const  share = async () => {
      //  const res = await getCodeImg();  
      copyToClipboard(`https://hzh.woide.top/#/register?sharecode=${userDetail.info.sharecode}`)    
}
const quit = () => {
  signOutState.value = !signOutState.value

}
const confirmOut = () => {
  router.push({ path: '/login' })
  window.localStorage.clear()
  message.success({
    content: '退出成功',
    duration: 1
  })
}
</script>

<style lang="scss" scoped>
.user_info_page {
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;

  .user_info_header {
    width: 100%;
    height: 150px;
    background-color: #ded6d6;
    padding: 30px;
    position: relative;

    .img_header {
      float: left;
    }

    .info_header {
      float: left;
      margin-left: 20px;


      .title {
        font-size: large;
        font-weight: bold;
        margin-top: 10px;
      }

      .phone {
        font-size: small;
        color: #878585;
        margin-top: 4px;
      }

      .remark {
        font-size: small;
        margin-top: 2px;
      }
    }

    .frequency {
      display: flex;
      flex-direction: row;
      position: absolute;
      bottom: 10px;
      left: 150px;

      .num {
        margin-right: 20px;
        white-space: nowrap;
        color: #808080;

        span {
          font-weight: bold;
          color: #000;
        }
      }
    }
  }

  .user_quit {
    float: right;
    height: 10px;
    height: 100px;
    display:flex;
flex-flow: column; //垂直排列
justify-content: space-between;//两端对齐
  }

  @media (max-width: 600px) {
    .tab_box {

      // position: -webkit-sticky;
      /* Safari */
      // position: sticky;
      top: 25px;

      // z-index: 99;
      // background-color: red;
      height: auto;
      width: 100%;
    }
  }

  @media (min-width: 600px) {
    .tab_box {
      // position: -webkit-sticky;
      // /* Safari */
      // position: sticky;
      // top: 0;

      // z-index: 9999;
      background-color: #fff;
    }
  }
  .empty_box {
    width: 100%;
    text-align: center;
     height: 500px;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .tab_body {
    width: 100%;
    height: auto;

    .invite_box {
      border-radius: 20px;
      border: 1px solid #e5e5e5;
      margin-top: 30px;
      height: 80px;
      padding: 10px;
      display:flex;
flex-flow: column; //垂直排列
justify-content: space-between;//两端对齐
    }

  }
}
</style>